<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/users'}">用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <!-- 搜索与添加区域 -->
          <el-input
            placeholder="请输入内容"
            class="input-with-select"
            v-model="pageParam.query"
            @clear="getUserPage"
            clearable
            >
            <el-button slot="append" icon="el-icon-search" @click="getUserPage"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="dialogVisible = true">添加用户</el-button>
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table
        :data="userList"
        style="width: 100%"
        stripe
        border
        >
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="role_name" label="角色"></el-table-column>
        <el-table-column prop="mg_state" label="状态">
          <!--  作用域插槽 -->
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              @change="userStateChanged(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditDialog(scope.row.id)"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteUser(scope.row.id)"></el-button>
            <el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" size="mini" icon="el-icon-star-off"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageParam.pagenum"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="userPage.total">
      </el-pagination>

      <!-- 添加OR修改用户对话框 -->
      <user-dialog-form
        :userForm="userForm"
        :dialogVisible="dialogVisible"
        :hideDialog="hideDialog"
        :getUserPage="getUserPage"
        :resetUserForm="resetUserForm"
        >
      </user-dialog-form>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { reqUserById, reqDeleteUser } from '../../api'
import UserDialogForm from '../../components/userDialogForm/UserDialogForm'
export default {
  name: 'login',
  data() {
    return {
      // 获取用户列表的参数对象
      pageParam: {
        // 搜索的文本
        query: '',
        // 当前页码
        pagenum: 1,
        // 每页显示的条数
        pagesize: 2
      },
      // 用户列表
      userList: [],
      // 添加用户的表单数据
      userForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 对话框显示与隐藏
      dialogVisible: false
    }
  },
  created() {
    this.getUserPage()
  },
  methods: {
    // 获取用户分页对象
    getUserPage() {
      this.$store.dispatch('getUserPage', this.pageParam)
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(pagesize) {
      this.pageParam.pagesize = pagesize
      this.$store.dispatch('getUserPage', { ...this.pageParam, pagesize })
    },
    // 监听 current-page 改变事件
    handleCurrentChange(pagenum) {
      this.pageParam.pagenum = pagenum
      this.$store.dispatch('getUserPage', { ...this.pageParam, pagenum })
    },
    // 监听 switch 状态改变的事件
    userStateChanged(userInfo) {
      const { id: uid, mg_state: state } = userInfo
      // 更新用户状态
      this.$store.dispatch('updateUserState', { uid, state })
    },
    // 重置表单元素数据
    resetUserForm() {
      this.userForm = {
        username: '',
        password: '',
        email: '',
        mobile: ''
      }
    },
    // 隐藏对话框
    hideDialog() {
      this.dialogVisible = false
    },
    // 显示修改对话框
    async showEditDialog(id) {
      this.dialogVisible = true
      // 发送请求,获取用户
      const { data, meta } = await reqUserById(id)
      if (meta.status !== 200) return this.$message.error(meta.msg)
      this.userForm = { ...this.userForm, ...data }
    },
    deleteUser(id) {
      this.$confirm('确定删除该用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { meta } = await reqDeleteUser(id)
        console.log(meta)
        if (meta.status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 刷新用户列表
          this.getUserPage()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  computed: {
    ...mapState(['userPage'])
  },
  components: {
    'user-dialog-form': UserDialogForm
  },
  watch: {
    userPage (value) {
      this.userList = value.users
    }
  }
}
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 13px;
}

.box-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}

.el-table {
  margin-top: 15px;
  font-size: 13px;
}

.el-pagination {
  margin-top: 15px;
}
</style>
